<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>订单详情</title>
  <style>
    .order-container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    .loading {
      text-align: center;
      font-size: 18px;
      color: #666;
    }

    /* 按钮样式 */
    .buy-button {
      display: inline-block;
      padding: 12px 24px;
      background: linear-gradient(45deg, #ff8c00, #ff4b00); /* 渐变色 */
      color: white;
      font-size: 18px;
      font-weight: bold;
      border-radius: 50px; /* 圆角按钮 */
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      transition: all 0.3s ease;
    }

    .error {
      color: red;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="order-container">
  <h2>订单详情</h2>
  <div id="orderDetails">
    <p class="loading">加载中...</p>
  </div>
  <div id="buyButtonContainer">
    <button id="buyButton" class="buy-button">确定购买</button>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', async () => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const orderId = urlParams.get('orderId');

      if (!orderId) {
        throw new Error('订单ID不存在');
      }

      const token = localStorage.getItem('token');
      if (!token) {
        throw new Error('用户未登录，请先登录');
      }

      const response = await fetch(`/getOrderDetails?orderId=${orderId}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (!response.ok) {
        throw new Error('获取订单详情失败');
      }

      const data = await response.json();

      if (data.code === '0000') {
        currentOrder = data.data;
        console.log("data1111:"+data.data)
        renderOrderDetails(data.data);
      } else {
        throw new Error(data.message || '获取订单详情失败');
      }
    } catch (error) {
      console.error(error);
      document.getElementById('orderDetails').innerHTML =
              `<p class="error">${error.message}</p>`;
    }
  });

  function renderOrderDetails(order) {
    const orderDetails = document.getElementById('orderDetails');
    orderDetails.innerHTML = `
                <p><strong>订单ID:</strong> ${order.orderId}</p>
                <p><strong>订单支付状态:</strong> ${order.paymentStatus}</p>
                <p><strong>创建时间:</strong> ${order.createdTime}</p>
                <p><strong>总金额:</strong> ¥${order.totalAmount.toFixed(2)}</p>
            `;
  }

  document.getElementById('buyButton').addEventListener('click', () => {
    // 创建一个表单
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/alipay/createOrder';
    form.style.display = 'none';

    // 添加参数：orderId 和 totalAmount
    const fields = {
      outTradeNo: currentOrder.orderId,
      totalAmount: currentOrder.totalAmount
    };

    for (const key in fields) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = fields[key];
      form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit(); // 提交表单
  });
</script>
</body>
</html>